<template>
  <div v-if="list.length > 0">
    <div v-for="(item, key) in list" :key="key" class="m10px p10px" :style="cardStyle" style="background-size: 100% 100%">
      <div class="flex">
        <img v-if="item.cover_image" :src="item.cover_image" alt="" class="size-100px rounded-5 mr10px" />
        <div :style="item.cover_image ? 'width:calc(100% - 110px)' : 'width:100%'">
          <div class="text-16px">{{ item.title }}</div>
          <div class="text-12px text-gray py2 truncate">{{ item.desc }}</div>
          <div class="flex justify-between items-center mt15px">
            <div class="text-12px" :style="{ color: numberColor }">
              <uni-icons :type="icon" :color="numberColor"></uni-icons> {{ item.visit_count + item.fake_count }} {{ numberDesc }}
            </div>
            <div>
              <div>
                <van-button :color="buttonColor" size="small" round class="px5">{{ buttonText }}</van-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="showMore">
      <van-divider>加载更多</van-divider>
    </div>
  </div>
  <el-empty v-else></el-empty>
</template>

<script>
import { getTestList } from '@/api/test.js'

export default {
  name: 'DkAppTestList',
  props: {
    recommend: { type: Number, default: 0 },
    icon: { type: String, default: 'fire-filled' },
    numberColor: { type: String, default: '#F64C2E' },
    numberDesc: { type: String, default: '人已测' },
    buttonColor: { type: String, default: '#F64C2E' },
    buttonText: { type: String, default: '开始测试' },
    showMore: { type: Boolean, default: false },
    pageSize: { type: Number, default: 5 },
    cardStyle: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      list: []
    }
  },
  computed: {
    style() {
      return { backgroundImage: 'url( ' + this.cardImage + ')' }
    }
  },
  watch: {
    recommend() {
      this.getTestList()
    },
    pageSize() {
      this.getTestList()
    }
  },
  mounted() {
    this.getTestList()
  },
  methods: {
    getTestList() {
      getTestList(1, this.pageSize, this.recommend).then((res) => {
        this.list = res.data.list
      })
    }
  }
}
</script>

<style scoped></style>
